<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <h1 id="h1">{{msg}}</h1> 
    </div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'你是野王吗'
        },
        //初始化的时候会执行4个钩子 组件加载时候 这四个钩子只会执行一次
        beforeCreate () {
            //组件的初始化 获取不到data或者methods
            //一般业务中用的较少  一般用于初始化一些参数
            console.group('beforeCreate')
            console.log('$data',this.$data);
            console.log(document.getElementById('h1').innerText);
            console.groupEnd()
        },
        created () {
            //数据和methods都已经初始化完成 可以使用 虚拟dom 没有创建出来
            //可以对data进行修改
            //可以发送网络请求
            console.group('created')
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.getElementById('h1').innerText);
            console.groupEnd()
        },
        beforeMount () {
            //虚拟dom创建出来了 但是尚未对数据进行解析和挂载
            //没有真正的挂载到html页面中
            //可以发送网络请求

            console.group('beforeMount')
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.getElementById('h1').innerText);
            console.groupEnd()
        },
        mounted () {
            // 一切准备就绪 虚拟dom已经对数据 已经对数据进行解析完成 并且真正的挂载到html中
            //做dom操作用mounted
            //可以发送网络请求

            console.group('mounted')
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.getElementById('h1').innerText);
            console.groupEnd()
        },
        //更新的时候
        beforeUpdate () {
            console.group('beforeUpdate')
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.getElementById('h1').innerText);
            console.groupEnd()
        },
        updated () {
            console.group('updated')
            console.log('$data',this.$data);
            console.log('$el',this.$el);
            console.log(document.getElementById('h1').innerText);
            console.groupEnd()
        },
        //组件销毁的时候 一般用一个就行了   
        //应用  移除持续性的事件监听  比如 video监听进度条更新事件 卸载定时器
        beforeDestroy () {
            
        },
        destroyed () {
            
        }
        
    })
</script>